import 'package:app_30/res/colors.dart';
import 'package:app_30/widgets/my_app_bar.dart';
import 'package:app_30/widgets/my_scroll_view.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

class VipPage extends StatefulWidget {
  const VipPage({Key? key}) : super(key: key);

  @override
  State<VipPage> createState() => _VipPageState();
}

class _VipPageState extends State<VipPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: MyAppBar(
        isBack: false,
        centerTitle: 'VIP',
      ),
      body: MyScrollView(
        children: [
          Container(
            decoration: BoxDecoration(
              color: Colors.white10,
            ),
            child: Column(mainAxisAlignment: MainAxisAlignment.start, children: [
              Container(
                decoration: BoxDecoration(
                  image: new DecorationImage(
                    fit: BoxFit.fill,
                    image: new AssetImage('assets/image/vipbg.png'),
                  ),
                ),
                child: Padding(
                    padding: EdgeInsets.all(10),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        Row(
                          mainAxisSize: MainAxisSize.max,
                          children: [
                            Image.asset(
                              "assets/image/vip_finger.png",
                              width: 13,
                              height: 13,
                            ),
                            Padding(
                              padding: EdgeInsets.only(left: 5),
                              child: Text(
                                "注意",
                                textAlign: TextAlign.center,
                                style: TextStyle(fontSize: 16, color: Colors.white),
                              ),
                            )
                          ],
                        ),
                        Row(mainAxisSize: MainAxisSize.max, children: [
                          Text(
                            "1.手动阀手动阀\n 1.手动阀手动阀\n1.手动阀手动阀\n1.手动阀手动阀\n1.手动阀手动阀\n1.手动阀手动阀\n1.手动阀手动阀\n",
                            textAlign: TextAlign.left,
                            style: TextStyle(fontSize: 14, color: Colors.white),
                          )
                        ])
                      ],
                    )),
              ),
              Container(
                decoration: BoxDecoration(
                  color: Colors.black,
                ),
                child: Padding(
                    padding: EdgeInsets.all(10),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        Row(mainAxisSize: MainAxisSize.max, children: [
                          Expanded(
                            child: TextButton(
                              child: Text("开通vip"),
                              //添加一个点击事件
                              onPressed: () {},
                              //设置按钮是否自动获取焦点
                              autofocus: true,
                              //定义一下文本样式
                              style: buildButtonStyle(),
                            ),
                          ),
                          SizedBox(width: 10,),
                          Expanded(
                            child: // use Spacer
                            TextButton(
                              child: Text("免费申请vip"),
                              //添加一个点击事件
                              onPressed: () {},
                              //设置按钮是否自动获取焦点
                              autofocus: true,
                              //定义一下文本样式
                              style: buildButtonStyle(),
                            ),
                          )
                        ])
                      ],
                    )),
              ),
              Padding(
                  padding: EdgeInsets.only(top: 5, bottom: 5),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    mainAxisSize: MainAxisSize.max,
                    children: [
                      Text(
                        "vip会员与普通会员的区别？点击查看视频",
                        style: TextStyle(fontSize: 12, color: Colors.blue),
                      ),
                      SizedBox(
                        width: 10,
                      )
                    ],
                  )),
              Image.asset("assets/image/vip.png"),
              Stack(
                alignment: AlignmentDirectional.topCenter,
                children: [
                  Align(
                    alignment: Alignment.center,
                    child: Container(
                      margin: EdgeInsets.fromLTRB(10, 20, 10, 10),
                      decoration: BoxDecoration(
                        color: Colors.black87,
                        shape: BoxShape.rectangle,
                        borderRadius: BorderRadius.circular(5.0),
                      ),
                      child: Padding(
                        padding: EdgeInsets.fromLTRB(10, 15, 10, 10),
                        child: Row(mainAxisSize: MainAxisSize.max, children: [
                          Text(
                            "1.手动阀手动阀技术的封建士大夫\n 1.手动阀手动阀\n1.手动阀手动阀\n1.手动阀手动阀\n1.手动阀手动阀\n1.手动阀手动阀\n1.手动阀手动阀\n",
                            textAlign: TextAlign.left,
                            style: TextStyle(fontSize: 14, color: Colors.white),
                          )
                        ]),
                      ),
                    ),
                  ),
                  Align(
                    alignment: Alignment(0, 0),
                    child: Container(
                      margin: EdgeInsets.only(top: 10),
                      padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
                      decoration: BoxDecoration(
                        color: Colours.app_main,
                        shape: BoxShape.rectangle,
                        borderRadius: BorderRadius.circular(5.0),
                      ),
                      child: Padding(
                        padding: EdgeInsets.all(3),
                        child: Row(mainAxisSize: MainAxisSize.min, children: [
                          Text(
                            "免费vip说明",
                            textAlign: TextAlign.left,
                            style: TextStyle(fontSize: 13, color: Colors.white),
                          )
                        ]),
                      ),
                    ),
                  )
                ],
              )
            ]),
          ),
        ],
      ),

    );
  }

  ButtonStyle buildButtonStyle() {
    return ButtonStyle(
      //定义文本的样式 这里设置的颜色是不起作用的
      textStyle: MaterialStateProperty.all(
          TextStyle(fontSize: 15, color: Colours.app_main)),
      //设置按钮上字体与图标的颜色
      //foregroundColor: MaterialStateProperty.all(Colors.deepPurple),
      //更优美的方式来设置
      foregroundColor: MaterialStateProperty.resolveWith(
        (states) {
          if (states.contains(MaterialState.focused) &&
              !states.contains(MaterialState.pressed)) {
            //获取焦点时的颜色
            return Colors.white;
          } else if (states.contains(MaterialState.pressed)) {
            //按下时的颜色
            return Colors.white70;
          }
          //默认状态使用灰色
          return Colors.white;
        },
      ),
      //背景颜色
      backgroundColor: MaterialStateProperty.resolveWith((states) {
        //设置按下时的背景颜色
        if (states.contains(MaterialState.pressed)) {
          return Colours.dark_app_main;
        }
        //默认不使用背景颜色
        return Colours.app_main;
      }),
      //设置水波纹颜色
      overlayColor: MaterialStateProperty.all(Colours.app_main),
      //设置阴影  不适用于这里的TextButton
      elevation: MaterialStateProperty.all(0),
      //设置按钮内边距
      padding: MaterialStateProperty.all(EdgeInsets.all(10)),
      //设置按钮的大小
      minimumSize: MaterialStateProperty.all(Size(160, 40)),
      //设置边框
      // side: MaterialStateProperty.all(BorderSide(color: Colors.grey, width: 1)),
      //外边框装饰 会覆盖 side 配置的样式
      // shape: MaterialStateProperty.all(StadiumBorder()),
    );
  }
}
